<template>
  <div class="info-dialog">
    <el-dialog
      :visible.sync="visible"
      :title="title"
      :modal-append-to-body="true"
      :append-to-body="true"
      :destroy-on-close="false"
      :modal="true"
      :close-on-click-modal="false"
      top="10vh"
      @closed="closed"
    >
      <el-form ref="formData" :model="formData" :rules="rules">
        <el-form-item label-width="100px" label="名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入名称" autocomplete="off" />
        </el-form-item>

        <el-form-item label-width="100px" label="图标" prop="icon">
          <el-input v-model="formData.icon" placeholder="请输入图标路径" autocomplete="off" />
        </el-form-item>

        <el-form-item label-width="100px" label="默认状态" prop="state">
          <el-input v-model="formData.state" placeholder="请输入默认状态" autocomplete="off" />
        </el-form-item>

        <el-form-item label-width="100px" label="marker" prop="marker">
          <vue-json-editor
                  v-model="formData.marker"
                  :showBtns="false"
                  :mode="'code'"
                  lang="zh"
                  :expandedOnStart="true"
                 />
        </el-form-item>

        <el-form-item label-width="100px" label="label" prop="label">
          <vue-json-editor
                  v-model="formData.label"
                  :showBtns="false"
                  :mode="'code'"
                  lang="zh"
                  :expandedOnStart="true"
                 />
        </el-form-item>
        <el-form-item label-width="100px" label="window" prop="window">
          <vue-json-editor
                  v-model="formData.window"
                  :showBtns="false"
                  :mode="'code'"
                  lang="zh"
                  :expandedOnStart="true"
                 />
        </el-form-item>
      </el-form>
      <div style="text-align: right;">
        <el-button @click="closed" :loading="loading">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    saveStylePOI
  } from '@/api/51world/stylePoi.js'

  import vueJsonEditor from 'vue-json-editor'


  export default {
    name: 'InfoDialog',
    components: {
      vueJsonEditor,
    },
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed:{

    },
    watch:{
      properties: {
        handler: function(value) {
          this.visible=value.visible
          if (value.data) {

            if(value.data.id){
               this.title = '编辑'
            }else{
               this.title = '新增'
            }

            this.formData.id = value.data.id || ''
            this.formData.name = value.data.name || ''
            this.formData.state = value.data.state || ''
            this.formData.icon = value.data.icon || ''

            if(value.data.marker){
              this.formData.marker =JSON.parse(value.data.marker)  || {}
            }else{
              this.formData.marker ={}
            }

            if(value.data.label){
              this.formData.label =JSON.parse(value.data.label)  || {}
            }else{
              this.formData.label ={}
            }

            if(value.data.window){
              this.formData.window =JSON.parse(value.data.window)  || {}
            }else{
              this.formData.window ={}
            }
          } else {
            this.formData.id = ''
            this.formData.state = ''
            this.formData.name = ''
            this.formData.marker = {}
            this.formData.label = {}
            this.formData.label = {}
          }
        },
        immediate: true,
        deep: false
      }
    },
    data(){
      return {
        visible:false,
        title:'',
        loading:false,
        formData: {
          id: '',
          name: '',
          icon: '',
          state:'',
          marker: {},
          label: {},
          window: {},
        },
        windowDialog: {
          visible: false,
          type: '0',
          data: {}
        },
        rules: {
          name: [{
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 50,
            message: '长度在 1 到 50 个字符',
            trigger: 'blur'
          }
          ]
        }
      }
    },
    methods:{
      submitForm: function() {
        this.$refs.formData.validate((valid) => {
          if (valid) {
            this.loading = true
            this.formData.window=JSON.stringify(this.formData.window);
            this.formData.marker=JSON.stringify(this.formData.marker);
            this.formData.label=JSON.stringify(this.formData.label);
            saveStylePOI(this.formData).then(rsp => {
              if (rsp.code==200) {
                  this.$message({
                    type: 'success',
                    message: '成功!'
                  })
                this.loading = false
                this.closed()
              }
            })
            this.formData.window=JSON.parse(this.formData.window)
            this.formData.marker=JSON.parse(this.formData.marker)
            this.formData.label=JSON.parse(this.formData.label)
          }
        })
      },
      closed: function() {
        this.$emit('closed', false)
      },
    }
  }

</script>

<style>
</style>
